<template>
  <v-container>
    <v-card>
      <v-toolbar flat>
        <v-toolbar-title>展区分布</v-toolbar-title>
        <template v-slot:extension>
          <v-tabs v-model="tab" align-with-title>
            <v-tabs-slider></v-tabs-slider>
            <v-tab v-for="(item, i) in img" :key="i">
              {{ item.smName }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="(item, i) in img" :key="i" style="min-height: 30vh;display:flex;align-item:center" >
          <img :src="item.smImg" style="width: 100%"/>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-container>
</template>
<script lang="ts">
import Vue from "vue";
import { getSmap, getSmapAns } from "@/api/smap";
interface IData {
  img: Array<any>;
}
export default Vue.extend({
  name: "Smap",
  data() {
    return {
      tab: null,
      img: [''],
    };
  },
  mounted() {
    getSmap().then((res) => {
      const { code, msg, data } = res as unknown as getSmapAns;
      if (code == 200) {
        this.img = data;
        // console.log(data);
      } else {
        console.log(msg);
      }
    });
  },
});
</script>
<style>
.v-tabs-slider {
  background-color: #fff !important;
}
</style>